<template>
    <view class="headerLayout">
        <view class="switchBox">
            <view class="month" v-if="type !== 'all'">
                {{ currentDate.month }}月
            </view>
            <view class="switch">
                <view
                    :class="type === 'day' ? 'active' : 'switchItem'"
                    @click="changeTimeWay('day')"
                    >Day
                </view>
                <view
                    :class="type === 'week' ? 'active' : 'switchItem'"
                    @click="changeTimeWay('week')"
                    >Week
                </view>
                <view
                    :class="type === 'all' ? 'active' : 'switchItem'"
                    @click="changeTimeWay('all')"
                    >All
                </view>
            </view>
        </view>
        <view class="dateBox" v-if="type === 'day'">
            <view v-for="item in dayData" :key="item.date">
                <view
                    class="dateItem"
                    :class="item.date === currentDate.day && 'active'"
                    @click="changeTime(item.fulldate)"
                >
                    <view class="date"> {{ item.date }} </view>
                    <view class="week"> {{ item.week }} </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { stateDate } from "@/common/date";
import { mapActions, mapState } from "vuex";
import dayjs from "dayjs";
export default {
    data() {
        return {
            dayData: [],
            currentDate: {
                month: "", // 当前月份
                day: "", //当前日期
            },
            type: "day", // 当前排列
        };
    },
    methods: {
        ...mapActions("journalStore", [
            "getjournalListOptionAction",
            "getjournalListAction",
        ]),
        async changeTime(time) {
            this.showTime(time);
            let option = { ...this.journalListOption };
            option.now_time = time;
            this.getjournalListOptionAction(option);
            await this.getjournalListAction();
        },
        showTime(time) {
            this.currentDate.month = dayjs(time).format("M");
            this.currentDate.day = dayjs(time).format("DD");
        },
        async changeTimeWay(type) {
            this.type = type;
            if (type === "all") {
                uni.$emit("getAllJournal", {type:true});
            } else {
                uni.$emit("getAllJournal", {type:false});
                let option = { ...this.journalListOption };
                option.status = this.type;
                this.getjournalListOptionAction(option);
                await this.getjournalListAction();
            }
        },
    },
    created() {
        this.dayData = stateDate();
        this.showTime(new Date());
    },
    watch: {},
    computed: {
        ...mapState("journalStore", ["journalListOption"]),
        ...mapState("userStore" , ['userInfo'])
    },
};
</script>

<style lang="scss" scoped>
.headerLayout {
    background: #d7cef8;
    padding: 0 32rpx;
    padding-top: 200rpx;
    padding-bottom: 100rpx;

    .switchBox {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .month {
            font-size: 36rpx;
            font-weight: 700;
        }

        .switch {
            display: flex;
            justify-content: space-around;
            width: 280rpx;
            background: #fff;
            height: 80rpx;
            text-align: center;
            align-items: center;
            border-radius: 20rpx;
            padding: 0 20rpx;

            .active {
                width: 50%;
                height: 60rpx;
                line-height: 60rpx;
                background: #ff5987;
                color: #fff;
                font-weight: 700;
                padding: 0 12rpx;
                font-size: 28rpx;
                border-radius: 12rpx;
                animation: myfirst 0.5s;
                @keyframes myfirst {
                    0% {
                        margin: 0rpx 0rpx;
                    }
                    50% {
                        margin: 0rpx 10rpx;
                    }
                    100% {
                        margin: 0rpx;
                    }
                }
            }
            .switchItem {
                width: 50%;
                height: 60rpx;
                line-height: 60rpx;
                color: #ff5987;
                padding: 16rpx;
            }
        }
    }

    .dateBox {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20rpx 0;
        border-radius: 24rpx;
        background: #e7e3f8;
        margin-top: 32rpx;

        .dateItem {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100rpx;
            height: 120rpx;
            border-radius: 24rpx;
            font-weight: 700;

            .week {
                font-weight: 500;
            }
        }
        .active {
            background: #ff5987;
            color: #fff;
        }
    }
}
</style>
